<template>
    <div class="ivz-order-form">
      <AInputGroup compact>
        <AButton type="primary" @click="() => orderHandle('left')">
          <VerticalRightOutlined />左移
        </AButton>
        <AButton type="dashed" @click="() => orderHandle('right')">
          右移<VerticalLeftOutlined />
        </AButton>
      </AInputGroup>
    </div>
</template>

<script>
/*自定义权限功能点组件*/
import {VerticalLeftOutlined, VerticalRightOutlined} from "@ant-design/icons-vue";
import {mapGetters} from "vuex";

export default {
  name: "IvzPermForm",
  props: ['meta', 'model'],
  components: {VerticalRightOutlined, VerticalLeftOutlined},
  computed: {
    ...mapGetters(['tableMetas', 'activeMeta'])
  },
  methods: {
    orderHandle(order) {
      if(this.activeMeta.id == 'action') {
        return this.$msg.warningMessage("操作列不支持移动")
      }

      let number = this.tableMetas.findIndex(item => item.id == this.activeMeta.id);

      if(order == 'left') {
        if(number == 0) return;

        let delMeta = this.tableMetas.splice(number, 1)[0];
        this.tableMetas.splice(number - 1, 0, delMeta);
      } else {
        if(number == this.tableMetas.length - 2) return;

        let delMeta = this.tableMetas.splice(number + 1, 1)[0];
        this.tableMetas.splice(number, 0, delMeta);
      }
    }
  }
}
</script>

<style scoped>
 .ivz-perm-form .ant-input {
     padding: 4px 0px!important;
 }
</style>
